<template>
  <!--账号登录表单-->
  <div class="login-box">
    <!--标题-->
    <div class="title-box">
      <hr/>
      <span class="title-item">读者登录</span>
      <hr/>
    </div>

    <!--登录表单-->
    <a-form class="info-box">
      <!-- 账号 -->
      <a-form-item class="form-item">
        <a-input
            class="input-item"
            v-model="loginFrom.account"
            size="large"
            placeholder="请输入账号/手机号"
        >
          <a-icon class="icon-item" slot="prefix" type="user"/>
        </a-input>
      </a-form-item>
      <!-- 密码 -->
      <a-form-item class="form-item">
        <a-input-password
            class="input-item"
            v-model="loginFrom.password"
            size="large" type="password"
            placeholder="请输入密码"
        >
          <a-icon class="icon-item" slot="prefix" type="lock"/>
        </a-input-password>
      </a-form-item>
      <!-- 验证码 -->
      <a-form-item class="form-item">
        <a-input
            class="input-item code-input-item"
            size="large"
            v-model="loginFrom.captcha.value"
            placeholder="验证码"
        >
          <a-icon slot="prefix" type="picture"/>
        </a-input>
        <img class="code-img" :src="codeImg" @click="loadCodeImg" :alt="''"/>
      </a-form-item>
      <a-form-item class="form-item">
        <!-- 登录按钮，参考ant-vue 的 button 组件，绑定了点击事件，绑定了加载状态 -->
        <a-button
            class="login-button"
            type="primary"
            :loading="doLoginLoading"
            @click="doLogin"
        >登录
        </a-button>
      </a-form-item>

    </a-form>


    <!--注册账号-->
    <!--        <div class="register-box">-->
    <!--            <div class="register-item"> 没有账号？</div>-->
    <!--            <router-link class="register-item register-button" :to="'register'">注册</router-link>-->

    <!--        </div>-->

    <!--忘记密码 TODO to=?-->
<!--    <router-link class="forget-password" :to="''">忘记密码</router-link>-->
  </div>
</template>

<script>
import {getCaptcha, doLoginByPwd} from "@/api/CommonApi"
import {generateMixed} from "@/utils/StringUtils";
import md5 from "md5"

export default {
  name: "LoginForm",
  data() {
    return {
      // 验证码图片内容
      codeImg: '',
      // 状态值：是否正在提交登录表单数据
      doLoginLoading: false,
      // 登录表单数据
      loginFrom: {
        "account": "",
        "captcha": {
          "key": "",
          "value": ""
        },
        "password": "",
        "smsCode": "",
        "smsLogin": false
      },

    }
  },
  // 生命周期函数：页面组件被创建时执行
  created() {
    this.loadCodeImg()
  },
  methods: {
    // 从服务器加载图片验证码
    loadCodeImg() {
      // 将状态设为加载中
      this.doLoginLoading = true
      const key = generateMixed(12)
      this.loginFrom.captcha.key = key
      this.codeImg = null
      getCaptcha(key).then(res => {
        // 图片验证码
        this.codeImg = res.result
      }).finally(() => {
        // 将状态设置为未加载
        this.doLoginLoading = false
      })
    },
    // 执行登录操作
    doLogin() {
      // 对象解构，复制一份数据，避免对原始数据产生污染
      const data = {...this.loginFrom}
      // 对用户密码进行MD5加密
      data.password = md5(data.password)
      // 将状态设为提交中
      this.doLoginLoading = true
      // 提交登录信息到服务器
      doLoginByPwd(data).then(res => { // 服务器响应成功的回调函数
        // 如果登录失败了，抛出异常
        if (!res.success) {
          throw new Error(res.message)
        }
        // 登录成功后，将服务器签发的token存储到localStorage中
        localStorage.setItem('token', res.result)

        // 然后应该跳转到首页
        this.$router.replace({path: '/index'})
      }).catch(err => { // 登录失败的回调函数
        // 弹出错误信息
        this.$message.error(err.message)
      }).finally(() => { // 无论成功还是失败，最终会都会执行的回调函数
        // 在这里我们将加载状态还原，并重新加载图形验证码
        this.doLoginLoading = false
        this.loadCodeImg()
      })
    }
  },
  mounted() {
    // 检查如果已登录直接跳转到首页
    if (localStorage.getItem('token') !== '' || localStorage.getItem('token') === undefined || localStorage.getItem('token') === null) {
      // this.$router.push('/')
      console.log(localStorage.getItem('token'))
    } else {
      console.log('用户未登陆.')
    }
  }

}
</script>

<style lang="less" scoped>
//phone
@media only screen and (max-width: 576px) {
  .login-box {
    @width: calc(94vw - 6vw);
    @height: 73vw;
    width: @width;
    min-height: @height;
    margin: auto;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(3, 1fr);

    .title-box {
      grid-row: 1 / span 1;
      grid-column: 1 / span 3;
      width: @width;
      min-height: calc(@height / 6);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-item {
        text-align: center;
        line-height: 5vw;
        font-size: 4vw;
        font-weight: 400;
        color: #4E4E4E;
      }

      hr {
        width: calc(@width / 2 - 14vw);
        border-top: 1px solid #D2D2D2;
        border-bottom: none;
        display: block;
        margin-left: 0;
        margin-right: 0;
      }

    }

    .info-box {
      grid-row: 2 / span 4;
      grid-column: 1 / span 3;
      width: 100%;
      min-height: calc(@height / 6 * 4);
      justify-self: center;
      display: flex;
      flex-direction: column;

      .form-item {
        width: 100%;
        height: 6vw;

        .login-button {
          width: 100%;
        }

        .input-item {
          width: calc(@width); //73vw - 6vw
        }

        .code-input-item {
          width: calc(@width - 6vw - 30vw);
          margin-right: 2vw;
          vertical-align: bottom;
        }

        .code-img {
          width: 28vw;
          height: 10vw;
          border-radius: 1vw;
          vertical-align: bottom;
          cursor: pointer;
          border: none;
        }
      }
    }

    //.register-box{
    //    width:calc((@width - 6vw) / 3 * 2 + 1vw);
    //    min-height:calc(@height / 6);
    //    justify-self: end;
    //    grid-row: 6 / span 1;
    //    grid-column:1 / span 2;
    //    display:flex;
    //    flex-direction: row-reverse;
    //    justify-content: space-between;
    //    align-items: center;
    //    .register-item{
    //        color:#4E4E4E;
    //        font-size:4vw;
    //    }
    //    .register-button{
    //        width:20vw;
    //        height: 9vw;
    //        background-color: #8CDC65;
    //        font-size:4vw;
    //        line-height: 9vw;
    //        text-align: center;
    //        border-radius: 1vw;
    //        border:none;
    //        color:white;
    //        margin-right:2vw;
    //    }
    //}
    .forget-password {
      width: calc((@width - 6vw) / 3 - 1vw);
      min-height: calc(@height / 6);
      justify-self: flex-start;
      grid-row: 6 / span 1;
      grid-column: 3 / span 1;
      line-height: calc(@height / 6);
      text-align: end;
      font-size: 4vw;
      color: #5EA4EE;
    }
  }
}

//pc
@media only screen and (min-width: 576px) {
  .login-box {
    @width: 560px;
    @height: 332px;
    margin: 0 auto;
    width: @width;
    height: @height;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(3, 1fr);
    //标题
    .title-box {
      grid-row: 1 / span 1;
      grid-column: 1 / span 3;
      width: @width;
      height: calc(@height / 6);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-item {
        text-align: center;
        line-height: 20px;
        font-size: 15px;
        font-weight: 400;
        color: #4E4E4E;
      }

      hr {
        width: calc(@width / 2 - 60px);
        border-top: 1px solid #D2D2D2;
        border-bottom: none;
        display: block;
        margin-left: 0;
        margin-right: 0;
      }
    }

    //表单信息
    .info-box {
      grid-row: 2 / span 4;
      grid-column: 1 / span 1;
      width: calc(@width / 3 * 3);
      height: calc(@height / 6 * 4);

      .form-item {
        width: calc(@width / 3 * 3 - 20px);
        height: 37px;

        .input-item {
          width: calc(@width / 3 * 3 - 20px);
        }

        .code-input-item {
          width: calc(@width / 3 * 3 - 150px);
          margin-right: 10px;
        }

        .code-img {
          width: 120px;
          height: 40px;
          border-radius: 5px;
          vertical-align: bottom;
          cursor: pointer;
          border: none;
        }

        .login-button {
          width: calc(@width / 3 * 3 - 20px);

        }
      }
    }

    //注册
    .register-box {
      grid-row: 2 / span 4;
      grid-column: 3 / span 1;
      border-left: 1px solid #D2D2D2;
      border-right: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .register-item {
        color: black;
      }

      .register-button {
        width: 100px;
        height: 35px;
        background-color: #8CDC65;
        line-height: 35px;
        text-align: center;
        border-radius: 5px;
        border: none;
        color: white;
        margin-top: 10px;
        cursor: pointer
      }
    }

    //忘记密码
    .forget-password {
      grid-row: 6 / span;
      grid-column: 1 / span 2;
      width: calc(@width / 3 * 2 - 20px);
      height: calc(@height / 6);
      line-height: calc(@height / 6);
      text-align: end;
    }
  }

}

</style>
